<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
      xmlns:th = "http://www.thymeleaf.org">
<head>
    <title>Taco Cloud</title>
    <link rel = "stylesheet" th:href = "@{/styles.css}" />
</head>

<body>
    <form method="POST" th:action="@{/admin/deleteOrders}">
        <input type="submit" value="Delete All Orders" />
    </form>
    <form method = "POST" th:action = "@{/orders}" th:object = "${tacoOrder}">
        <h1>Order your taco creations!</h1>

        <img th:src = "@{/images/TacoCloud.png}"/>

        <h3>Your tacos in this order:</h3>
        <a th:href = "@{/design}" id = "another">Design another taco</a><br/>
        <ul>
            <li th:each = "taco : ${tacoOrder.tacos}">
                <span th:text = "${taco.name}">taco name</span></li>
        </ul>

        <h3>Deliver my taco masterpieces to...</h3>
        <label th = "*{deliveryName}">Name: </label>
        <input type = "text" th:field = "*{deliveryName}"/>
        <span class="validationError" th:if="${#fields.hasErrors('deliveryName')}"
              th:errors="*{deliveryName}">deliveryName Error</span>
        <br/>

        <label for = "deliveryStreet">Street address: </label>
        <input type = "text" th:field = "*{deliveryStreet}"/>
        <span class="validationError" th:if="${#fields.hasErrors('deliveryStreet')}"
              th:errors="*{deliveryStreet}">deliveryStreet Error</span>
        <br/>

        <label for = "deliveryCity">City: </label>
        <input type = "text" th:field = "*{deliveryCity}"/>
        <span class="validationError" th:if="${#fields.hasErrors('deliveryCity')}"
              th:errors="*{deliveryCity}">deliveryCity Error</span>
        <br/>

        <label for = "deliveryState">State: </label>
        <input type = "text" th:field = "*{deliveryState}"/>
        <span class="validationError" th:if="${#fields.hasErrors('deliveryState')}"
              th:errors="*{deliveryState}">deliveryState Error</span>
        <br/>

        <label for = "deliveryZip">Zip code: </label>
        <input type = "text" th:field = "*{deliveryZip}"/>
        <span class="validationError" th:if="${#fields.hasErrors('deliveryZip')}"
              th:errors="*{deliveryZip}">deliveryZip Error</span>
        <br/>

        <h3>Here's how I'll pay...</h3>
        <label for = "ccNumber">Credit Card #: </label>
        <input type = "text" th:field = "*{ccNumber}"/>
        <!-- Thymeleaf提供了便捷访问Errors对象的方法，这就是借助fields及其th:errors属性。
         使用th:if属性来决定是否要显示该元素。fields属性的hasErrors()方法会检查ccNumber域是否存在错误。
         th:errors属性引用了ccNumber输入域，如果该输入域存在错误，它会将<span>元素的占位符内容替换为校验信息。-->
        <span class="validationError" th:if="${#fields.hasErrors('ccNumber')}"
                                      th:errors="*{ccNumber}">CC Num Error</span>
        <br/>

        <label for = "ccExpiration">Expiration: </label>
        <input type = "text" th:field = "*{ccExpiration}"/>
        <span class="validationError" th:if="${#fields.hasErrors('ccExpiration')}"
              th:errors="*{ccExpiration}">ccExpiration Error</span>
        <br/>

        <label for = "ccCVV">CVV: </label>
        <input type = "text" th:field = "*{ccCVV}"/>
        <span class="validationError" th:if="${#fields.hasErrors('ccCVV')}"
              th:errors="*{ccCVV}">ccCVV Error</span>
        <br/>

        <input type = "submit" value = "Submit Order"/>
    </form>
</body>
</html>